<template>
	<view class="content page">
		<view class="task" v-for="(item,index) in data.cleanAreaList" :key="index">
			<view class="task_con">
				<text>{{item.areaName}} </text><text> {{item.remark}}</text>
			</view>
			<view :class="item.qualified==0?'task_pass':'task_pass no_pass'">
				{{item.qualified==0?'合格':'不合格'}}
			</view>
		</view>
		
		<view class="rwjc_con">
			<view class="">
				存在主要问题
			</view>
			<view>{{data.problem}}</view>
		</view>
		<view class="rwjc_con">
			<view class="">
				问题纠正
			</view>
			<view>{{data.problemCorrection}}</view>
		</view>
		<view class="rwjc_con">
			<view class="">
				责任人
			</view>
			<view>{{data.personLiable}}</view>
		</view>
		<view class="rwjc_con">
			<view class="">
				备注
			</view>
			<view>{{data.remark}}</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infoData:[
					{
						title:'展厅',
						content:'（地面整洁、无垃圾、无积水、果皮箱、灭火器、消火栓干净、无张贴物、无蜘蛛网）',
						responsibilityAc:1
					},
					{
						title:'大厅',
						content:'（地面整洁、无垃圾、无积水、果皮箱、灭火器、消火栓干净、无张贴物、无蜘蛛网）',
						responsibilityAc:0
					},
					{
						title:'电梯',
						content:'（按钮干净、轿厢内无垃圾、无积水、无张贴物、轿顶干净无蜘蛛网）',
						responsibilityAc:0
					},
					{
						title:'道路',
						content:'（地面整洁、无垃圾、无积水、果皮箱干净、无张贴物）',
						responsibilityAc:0
					},
					{
						title:'车库',
						content:'（地面整洁、无垃圾、无积水、果皮箱干净、无张贴物）',
						responsibilityAc:0
					},
					{
						title:'花池内',
						content:'（无白色垃圾、无污物）',
						responsibilityAc:0
					},
					{
						title:'定点垃圾场',
						content:'（垃圾箱干净、存放点无垃圾堆放）',
						responsibilityAc:0
					},
					{
						title:'公寓',
						content:'（地面整洁、无垃圾、无积水、果皮箱干净、无张贴物、转运垃圾桶干净无垃圾堆放）',
						responsibilityAc:0
					},
					{
						title:'休闲区',
						content:'（地面整洁、无垃圾、无积水、果皮箱干净、无张贴物、健身器材完好干净）',
						responsibilityAc:0
					},
					{
						title:'厕所',
						content:'（干净整洁、无张贴物、洗手台面干净整洁、洗手盆干净）',
						responsibilityAc:0
					}
				],
				data:{}
			};
		},
		onLoad(option) {
					this.getInfo(option.id)
		},
		methods: {
			getInfo(id){
				console.log('001')
				let that=this
				//联网加载数据
				this.apis.greencleanApi.clCleanRecord(id).then(res => {
					this.data=res.data
				}).catch(()=>{
					//联网失败的回调,隐藏下拉刷新的状态
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		padding-top: 20rpx;
	}
	.content {
		.task{
			display: flex;
			flex-direction: column;
			background: #FFFFFF;
			padding: 40rpx 30rpx;
			margin-bottom: 20rpx;
			border-radius: 12rpx;
			position: relative;
			.task_con{
				height: 84rpx;
				overflow: hidden;
				font-size: 30rpx;
				font-weight: 500;
				margin-top: 18rpx;
				text:nth-child(1){
					color: #333333;
				}
				text:nth-child(2){
					color: #999999;
					margin-left: 10rpx;
				}
			}
			.task_pass{
				position: absolute;
				top: 0;
				left: 0;
				color: #FFFFFF;
				font-size: 24rpx;
				font-weight: 500;
				padding: 2rpx 30rpx 2rpx 16rpx;
				height: 36rpx;
				background: #44D94B;
				background: linear-gradient(-60deg, transparent 10px, #44D94B 0);
				border-radius: 12rpx 0px 12rpx 0px;
			}
			.no_pass{
				background: #BDBDBD;
				background: linear-gradient(-60deg, transparent 10px, #BDBDBD 0);
			}
		}
		
		.rwjc_con{
			display: flex;
			flex-direction: column;
			background: #FFFFFF;
			padding: 40rpx 30rpx;
			margin-bottom: 20rpx;    
			border-radius: 12rpx;
			align-items: flex-start;
			view{
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
			}
			view:nth-child(2){
				margin-top: 10rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
			}
		}
	}
</style>
